<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-28 11:38:08
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-30 10:18:36
 * @FilePath: \ProtocolTool\src\renderer\src\views\Manual\Socket\GetParam.vue
-->
<script lang="ts" setup>
import { ref } from 'vue'
import Status from '@/components/TestStatus/index.vue'
import { CloudSyncOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import TextDataBox from '@/components/TextDataBox/index.vue'
import { getTemplateAPI, socketGetParamAPI } from '@/api/Manual'

//获取选中设备clientId
const props = defineProps({
  device: {
    type: String,
    default: ''
  }
})

const loading = ref(false)
const list = ref<any>([])
const status = ref('')
const formRef = ref()
const form = ref({
  clientId: '',
  parameter: null
})
const rules = {
  parameter: {
    required: true,
    trigger: 'change'
  }
}

// 获取模板数据
const getTemplate = async () => {
  const res = await getTemplateAPI({ testItem: 'get_param' })
  form.value = JSON.parse(res.data.requestData)
}
getTemplate()

const handler = () => {
  if (!props.device) {
    message.error('请选择设备')
    return
  }
  form.value.clientId = props.device
  formRef.value.validate().then(() => {
    status.value = ''
    loading.value = true
    socketGetParamAPI(form.value)
      .then((res) => {
        status.value = res.data.resultStatus === 200 ? 'success' : 'fail'
        list.value.unshift({
          id: list.value.length ? list.value[0].id + 1 : 1,
          itemId: res.data.itemId,
          time: Date.now(),
          data: res.data.responseData ? res.data.responseData.replaceAll('\n', '<br/>') : 'null',
          requestData: res.data.requestData
            ? res.data.requestData.replaceAll('\n', '<br/>')
            : 'null',
          msg: res.data.result,
          resultStatus: res.data.resultStatus
        })
      })
      .finally(() => {
        loading.value = false
      })
  })
}
</script>
<template>
  <div>
    <div>
      <div class="title">获取工作参数</div>
      <div class="desc">
        通过指令方式获取地球物理专用设备的工作参数，包括网络参数、表述参数、测量参数。
      </div>
    </div>

    <div class="content">
      <div class="left">
        <div class="result">
          <div class="result-title">测试结果</div>
          <div class="result-value">
            <Status :status />
          </div>
        </div>
        <div class="info">
          <a-button type="primary" block :loading @click="handler">
            <template #icon>
              <CloudSyncOutlined />
            </template>
            获取
          </a-button>
          <a-form ref="formRef" class="mt-10" :model="form" :rules="rules" layout="vertical">
            <a-form-item label="工作参数" name="parameter">
              <a-select
                ref="select"
                v-model:value="form.parameter"
                placeholder="请选择工作参数"
                style="width: 100%"
              >
                <a-select-option value="n">网络参数</a-select-option>
                <a-select-option value="d">表述参数</a-select-option>
                <a-select-option value="m">测量参数</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
      </div>

      <div class="right">
        <div class="data-box" style="height: 434px">
          <TextDataBox :list />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.title {
  font-weight: 500;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 28px;
}

.desc {
  font-weight: 400;
  font-size: 14px;
  color: #909399;
  line-height: 22px;
  margin: 6px 0 16px;
}

.content {
  display: flex;

  .left {
    width: 200px;

    .result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid #d9d9d9;

      &-title {
        font-weight: 600;
        font-size: 16px;
      }

      &-value {
        width: 90px;
        height: 28px;
      }
    }

    .data-title {
      line-height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name {
        font-size: 16px;
      }

      .time {
        font-size: 12px;
        color: #a8abb2;
      }
    }

    .info {
      background: #ffffff;
      border-radius: 4px;
      width: 200px;
      overflow-x: hidden;
      overflow-y: auto;
      margin-top: 6px;
      background: #ffffff;
      border-radius: 4px;
    }
  }

  .right {
    margin-left: 10px;
    flex: 1;

    ::v-deep(.ant-btn) {
      height: 28px;
      padding: 2px 8px;
    }
  }
}
.ant-btn-primary {
  background-color: rgb(0, 185, 107);
}
.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #139937;
}
.ant-btn-default:not(:disabled):hover {
  color: #1a8c35;
  border-color: #139937;
}
</style>
